<template>
  <div class="word-pop" v-if="isDetail">
    <img src="@/assets/word/close-icon.png" class="close" @click="handleClose"/>
    <div class="word-pop-detail">
      <div class="content" v-html="translates"></div>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  name: 'translate',
  props: {
    isDetail: {
      type: Boolean,
      default: false
    },
    word: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      translates: ''
    }
  },
  mounted () {
    this.getTranslate()
  },
  methods: {
    getTranslate () {
      console.log(567 + this.word)
      axios.get('https://e-school.yixuepai100.com/index/index/searchword?word=' + this.word).then(res => {
        console.log(res)
        this.translates = res.data
      })
    },
    handleClose () {
      let params = {
        word: '',
        isDetail: false
      }
      this.$emit('translate', params)
    }
  }
}
</script>
<style lang='less' scoped>
.word-pop {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 600px;
  height: 580px;
  background: #fff;
  border-radius: 10px;
  z-index: 1100;
  .close {
    position: absolute;
    right: 20px;
    top: 20px;
    width: 20px;
    height: 20px;
    cursor: pointer;
  }
  &-detail {
    width: 100%;
    height: 540px;
    text-align: left;
    margin-top: 40px;
    padding-left: 40px;
    padding-right: 40px;
    padding-bottom: 40px;
    overflow: hidden;
    .content {
      width: 100%;
      height: 100%;
      overflow: auto;
      &::-webkit-scrollbar { width: 0 !important }
    }
  }
}
</style>
